<template>
  <div class="tech-chart-container">
    <!-- 新增：排序控制区（可根据需求隐藏/显示） -->
    <div ref="chart" class="chart-wrapper" style="background-color:white;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {debounce} from 'lodash'

export default {
  name: 'BarChartComponent',
  props: {
    chartData: {
      type: Object,
      default: () => ({
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        series: [
          {name: '数据A', data: [120, 132, 101, 134, 90, 230, 210, 230, 190, 230, 210, 170]},
        ]
      })
    },
    title: {
      type: String,
      default: '柱状图组件模版'
    },
    barWidth: {
      type: [String, Number],
      default: '60%'
    },
    // 新增：是否显示排序控制区
    showSortControl: {
      type: Boolean,
      default: true
    },
    // 新增：tooltip是否显示占比（针对多系列总和的占比）
    showTooltipPercent: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      colorPalette: ['#66cc99', '#66b3ff', '#ffcc99', '#ff99cc', '#99ccff'],
      // 新增：排序配置（default=默认，series_0=按第0个系列升序，series_0_desc=按第0个系列降序）
      sortConfig: 'default',
      // 新增：原始数据备份（用于排序时恢复）
      originalData: {
        xAxis: [],
        series: []
      }
    }
  },
  mounted() {
    // 备份原始数据（避免排序修改原props数据）
    this.originalData = JSON.parse(JSON.stringify(this.chartData))
    this.initChart()
    window.addEventListener('resize', debounce(this.handleResize, 100))
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      const option = this.getChartOption()
      this.chart.setOption(option)

      this.chart.on('mouseover', (params) => {
        if (params.componentType === 'series') {
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          })
        }
      })

      this.chart.on('mouseout', (params) => {
        if (params.componentType === 'series') {
          this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          })
        }
      })
    },

    getChartOption() {
      // 新增：获取排序后的数据（核心排序逻辑）
      const {sortedXAxis, sortedSeries} = this.getSortedData()
      const totalPerX = this.calculateTotalPerX(sortedSeries) // 计算每个X轴项的总和（用于占比）

      return {
        color: this.colorPalette,
        title: {
          text: this.title,
          left: 'center',
          textStyle: {
            color: 'black',
            fontSize: 18,
            fontWeight: 'normal',
            textShadow: '0 0 10px rgba(102, 204, 153, 0.7)'
          }
        },
        // 新增：增强版tooltip（显示数值、对比、占比）
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(10, 25, 47, 0.8)',
          borderColor: 'rgba(102, 204, 153, 0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#eaeaea'
          },
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(102, 204, 153, 0.1)'
            }
          },
          padding: 12,
          formatter: (params) => {
            // 1. 头部显示X轴标签（如“3月”）
            let res = `<div style="font-size:14px;font-weight:500;margin-bottom:8px;">${params[0].name}</div>`
            // 2. 计算当前X轴项的总和（用于占比）
            const currentTotal = totalPerX[params[0].dataIndex] || 0
            // 3. 遍历每个系列，显示名称、数值、占比（可选）
            params.forEach((item,) => {
              const value = item.value
              const percent = currentTotal > 0 ? ((value / currentTotal) * 100).toFixed(1) : '0.0'
              // 拼接样式：彩色圆点 + 系列名 + 数值 + 占比（可选）
              res += `<div style="font-size:12px;margin:4px 0;display:flex;align-items:center;">
                <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${item.color};margin-right:6px;"></span>
                <span style="width:60px;">${item.seriesName}：</span>
                <span style="font-weight:500;">${value}</span>
                ${this.showTooltipPercent ? `<span style="margin-left:8px;color:#8892a0;">(${percent}%)</span>` : ''}
              </div>`
            })
            // 4. 底部显示当前X轴项的总和（可选）
            if (this.showTooltipPercent && params.length > 1) {
              res += `<div style="font-size:12px;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,255,255,0.2);">
                合计：<span style="font-weight:500;">${currentTotal}</span>
              </div>`
            }
            return res
          }
        },
        legend: {
          data: sortedSeries.map(item => item.name),
          top: this.showSortControl ? 60 : 30, // 若显示排序控制，调整图例位置
          textStyle: {
            color: '#8892a0'
          },
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 4,
          itemGap: 15
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: this.showSortControl ? 100 : 70, // 若显示排序控制，调整网格顶部间距
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: sortedXAxis,
          axisLine: {
            lineStyle: {
              color: 'rgba(136, 146, 160, 0.2)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8892a0',
            fontSize: 12,
            interval: 0
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(136, 146, 160, 0.2)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#8892a0',
            fontSize: 12,
            formatter: '{value}'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(136, 146, 160, 0.1)'
            }
          },
          min: 0
        },
        series: sortedSeries.map((item, index) => {
          const baseColor = this.colorPalette[index % this.colorPalette.length] || '#66cc99'
          const gradientColor = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {offset: 0, color: baseColor},
              {offset: 1, color: baseColor + '80'}
            ]
          }

          return {
            name: item.name,
            type: 'bar',
            data: item.data,
            barWidth: this.barWidth,
            itemStyle: {
              color: gradientColor,
              borderRadius: [4, 4, 0, 0],
              shadowBlur: 8,
              shadowColor: baseColor + '30',
              shadowOffsetY: 2
            },
            emphasis: {
              itemStyle: {
                color: baseColor,
                shadowBlur: 12,
                shadowColor: baseColor + '50'
              }
            },
            animationDuration: 1500,
            animationEasing: 'elasticOut',
            label: {
              show: false,
              position: 'top',
              color: '#8892a0',
              fontSize: 10
            }
          }
        }),
        animation: true,
        animationDuration: 1200,
        animationEasingUpdate: 'cubicOut'
      }
    },

    // 新增：核心排序逻辑（根据sortConfig处理数据）
    getSortedData() {
      const {xAxis: originalX, series: originalSeries} = this.originalData
      // 1. 默认顺序：直接返回原始数据
      if (this.sortConfig === 'default') {
        return {
          sortedXAxis: originalX,
          sortedSeries: originalSeries
        }
      }

      // 2. 解析排序配置（如series_0=按第0个系列升序，series_0_desc=按第0个系列降序）
      const [seriesIdxStr, order = 'asc'] = this.sortConfig.split('_')
      const seriesIdx = parseInt(seriesIdxStr, 10)
      // 校验系列索引合法性
      if (isNaN(seriesIdx) || seriesIdx >= originalSeries.length) {
        return {sortedXAxis: originalX, sortedSeries: originalSeries}
      }

      // 3. 构建“X轴标签-目标系列数值”的映射数组
      const xValueMap = originalX.map((x, idx) => ({
        xLabel: x,
        value: originalSeries[seriesIdx].data[idx], // 目标系列的数值（用于排序）
        seriesData: originalSeries.map(s => s.data[idx]) // 所有系列的数值（用于同步排序）
      }))

      // 4. 按目标系列数值排序
      xValueMap.sort((a, b) => {
        return order === 'desc' ? b.value - a.value : a.value - b.value
      })

      // 5. 重组排序后的X轴和系列数据
      const sortedXAxis = xValueMap.map(item => item.xLabel)
      const sortedSeries = originalSeries.map((series, sIdx) => ({
        ...series,
        data: xValueMap.map(item => item.seriesData[sIdx]) // 同步调整每个系列的数据顺序
      }))

      return {sortedXAxis, sortedSeries}
    },

    // 新增：计算每个X轴项的总和（用于tooltip占比）
    calculateTotalPerX(series) {
      if (series.length === 0) return []
      const totalArr = []
      const dataLength = series[0].data.length
      // 遍历每个X轴索引，累加所有系列的数值
      for (let i = 0; i < dataLength; i++) {
        totalArr[i] = series.reduce((sum, s) => sum + (s.data[i] || 0), 0)
      }
      return totalArr
    },

    // 新增：排序下拉框变化时触发
    handleSortChange() {
      if (this.chart) {
        this.chart.setOption(this.getChartOption())
      }
    },

    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newVal) {
        // 数据变化时，重新备份原始数据并更新图表
        this.originalData = JSON.parse(JSON.stringify(newVal))
        this.sortConfig = 'default' // 重置排序为默认
        if (this.chart) {
          this.chart.setOption(this.getChartOption())
        }
      }
    },
    title(newVal) {
      if (this.chart) {
        this.chart.setOption({title: {text: newVal}})
      }
    },
    // 监听排序控制显示/隐藏，调整图表布局
    showSortControl() {
      if (this.chart) {
        this.chart.setOption(this.getChartOption())
      }
    }
  }
}
</script>

<style scoped>
.tech-chart-container {
  width: 100%;
  height: 100%;
  min-height: 350px; /* 增加最小高度，容纳排序控制区 */
  position: relative;
  padding: 16px;
  box-sizing: border-box;
}

/* 新增：排序控制区样式 */
.chart-control {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  color: '#8892a0';
  font-size: 12px;
}

.control-label {
  color: #8892a0;
  margin-right: 12px;
}

.sort-select {
  padding: 4px 8px;
  border: 1px solid rgba(136, 146, 160, 0.2);
  border-radius: 4px;
  background-color: white;
  color: #8892a0;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s;
}

.sort-select:hover {
  border-color: #66cc99;
}

.chart-wrapper {
  width: 100%;
  height: calc(100% - 40px); /* 减去排序控制区高度 */
  box-sizing: border-box;
}
</style>